<template>
  <div :style="styleItem">
    <!-- :style="{height: styleItem.height, width: styleItem.width}" -->
    <!-- <div class="tabs">
      <div
        :class="activeName == 1 ? 'isActive' : ''"
        class="tabsitem"
        @click="tabClick(1)"
      >
        本月
      </div>
      <div
        :class="activeName == 2 ? 'isActive' : ''"
        class="tabsitem"
        @click="tabClick(2)"
      >
        年度
      </div>
    </div> -->

    <div id="AccessCharts" ></div>

    <!-- <div id="DetailChart" v-if="activeName == 2"></div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "AccessCharts",
  props: {
    styleItem: {
      type: Object,
      default: () => {},
    },
    allCatData: {
      type: Array,
      default: () => [],
    },
    currentDate3: {
      type: Array,
      default: () => [],
    },
    accessDataDetails_time: {
      type: Array,
      default: () => [],
    },
    serises_data: {
      type: Array,
      default: () => [],
    },
    borrowTotalData: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      myChart: null,
      borrowData: [],
      borrowTime: []
    };
  },
  mounted() {
    this.showChart();
  },
  methods: {
    getMoreData() {
      this.borrowData = []
      this.borrowTime = []
      this.borrowTotalData.map(m => {
        this.borrowData.push(m.total)
        this.borrowTime.push(m.day)
      })
    },
    reloadChart() {
      this.myChart.clear();
      
      this.getMoreData()
      this.showChart();
    },
    // 展示本月
    showChart() {
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != "undefined"
      ) {
        this.myChart.dispose();
      }
      var chartDom = document.getElementById("AccessCharts");
      this.myChart = echarts.init(chartDom);


      this.myChart.setOption({
        // backgroundColor: "#04243E",
        title: {
          // text: '调阅信息统计',
          //  x: "center", //x轴方向对齐方式
          //  color:"#fff"
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "15%", // 组件离容器上侧的距离,百分比字符串或整型数字
          left: "5%", // 组件离容器左侧的距离,百分比字符串或整型数字
          right: "5%",
          bottom: "3%",
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
        },
        // calculable : true,
        // legend: {
        //   //上边图例部分
        //   data: ["调阅总量"],
        //   textStyle: {
        //     //图例文字的样式
        //     color: "#ccc",
        //     fontSize: this.$fontSize.fontSize(0.14)
        //   }
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          //设置x轴
          show: true,
          type: "category",
          // name:'时间',
          boundaryGap: true, //坐标轴两边不留白
          data: this.borrowTime, //数据
          interval: 0,
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              width: 1,
              color: "#636363",
            },
          },
          axisTick: {
            show: false,
            inside: true,
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(69, 240, 234, 1)",
            },
          },
          axisLabel: {
            // rotate: 8,
            color: "#ccc",
            //fontFamily: 'PingFangSC',
            fontSize: this.$fontSize.fontSize(0.12),
            // fontWeight: 300
          },
        },
        yAxis: {
          type: "value",
          show: true,
          // name:'总量',
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              width: 1,
              color: "#636363",
            },
          },

          axisLine: {
            lineStyle: {
              color: "rgba(69, 240, 234, 1)",
            },
          },
          axisTick: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLabel: {
            showMaxLabel: true,
            color: "#ccc",
            fontFamily: "PingFangSC",
            fontSize: this.$fontSize.fontSize(0.12),
            fontWeight: 300,
          },
        },
        series: [
          {
            name: "调阅总量",
            // stack: '总量',
            data: this.borrowData,
            type: "line",
            smooth: 0.4,
            symbol: "circle",
            symbolSize: 7,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#63A8E8",
                },
                color: "#63A8E8",
                borderWidth: 1,
                borderColor: "#63A8E8",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: this.$fontSize.fontSize(0.12),
                  },
                },
              },
            },
            areaStyle: {
              //这是阴影部分
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(63,227,236,0.8)",
                  },
                  {
                    offset: 0.4,
                    color: "rgba(63,227,236,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(63,227,236,0.00)",
                  },
                ]),
                // ['rgba(63,227,236,0.3)'],
              },
            },
          },
        ],
      });

      window.addEventListener("resize", function() {
        // console.log("动了3333");
        // this.myChart.resize();
      });
    },

    // // 年度
    // showDetailCharts() {
    //   // this.detailChart
    //   if (
    //     this.detailChart != null &&
    //     this.detailChart != "" &&
    //     this.detailChart != "undefined"
    //   ) {
    //     this.detailChart.dispose();
    //   }
    //   this.detailChart = echarts.init(document.getElementById("DetailChart"));
    //   this.detailChart.setOption({
    //     // backgroundColor: "#04243E",
    //     color: ["#409EFF"],
    //     tooltip: {
    //       trigger: "axis",

    //       axisPointer: {
    //         // 坐标轴指示器，坐标轴触发有效
    //         type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    //       },
    //     },
    //     // legend: {
    //     //   x: "30%",
    //     //   top: "1%",
    //     //   textStyle: {
    //     //     color: "#ffd285",
    //     //     fontSize: this.$fontSize.fontSize(0.12)
    //     //   },
    //     //   data: ["年度调阅总量"]
    //     // },
    //     grid: {
    //       top: "15%", // 组件离容器上侧的距离,百分比字符串或整型数字
    //       left: "5%", // 组件离容器左侧的距离,百分比字符串或整型数字
    //       right: "5%",
    //       bottom: "3%",
    //       containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
    //     },
    //     toolbox: {
    //       show: false,
    //       feature: {
    //         saveAsImage: {},
    //       },
    //     },
    //     // barWidth: 12,
    //     xAxis: {
    //       type: "category",
    //       axisLine: {
    //         lineStyle: {
    //           color: "#ccc",
    //         },
    //       },
    //       axisTick: {
    //         alignWithLabel: true,
    //       },
    //       axisLine: {
    //         //  改变x轴颜色
    //         lineStyle: {
    //           color: "rgba(69, 240, 234, 1)",
    //         },
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: "#ccc",
    //           fontSize: this.$fontSize.fontSize(0.12),
    //         },
    //       },
    //       boundaryGap: true, //false时X轴从0开始
    //       data: this.accessDataDetails_time,
    //     },
    //     yAxis: {
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           type: "solid",
    //           width: 1,
    //           color: "#636363",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //       axisLine: {
    //         //  改变x轴颜色
    //         lineStyle: {
    //           color: "rgba(69, 240, 234, 1)",
    //         },
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: "#ccc",
    //         },
    //       },
    //       type: "value",
    //     },
    //     series: [
    //       {
    //         name: "年度调阅总量",
    //         smooth: true,
    //         type: "bar",
    //         barWidth: this.$fontSize.fontSize(0.2),
    //         symbolSize: 8,

    //         //symbol: 'circle',
    //         data: this.serises_data,
    //       },
    //       // {
    //       //   type: "pie",
    //       //   center: ["78%", "40%"],
    //       //   radius: ["25%", "30%"],
    //       //   name: "调阅形式",
    //       //   tooltip: {
    //       //     trigger: "item",
    //       //     formatter: "{a} <br/>{b} : {c} ({d}%)"
    //       //   },
    //       //   startAngle: "90",
    //       //   itemStyle: {
    //       //     normal: {
    //       //       label: {
    //       //         show: true,
    //       //         position: "outside"
    //       //       },
    //       //       labelLine: {
    //       //         length: 10,
    //       //         length2: 10,
    //       //         show: true,
    //       //         color: "#00ffff"
    //       //       }
    //       //     }
    //       //   },
    //       //   data: pieAllData
    //       // }
    //     ],
    //   });
  



    // },

    // 切换图表
    tabClick(target) {
      if (target == "1") {
        this.activeName = 1;
        this.$nextTick(() => {
          this.showChart();
        });
      } else if (target == "2") {
        this.activeName = 2;
        this.$nextTick(() => {
          this.showDetailCharts();
        });
      }
    },
  },
};
</script>

<style lang="scss">
#AccessCharts {
  width: 100%;
  height: 100%;
}

.tabs {
  position: absolute;
  right: 2%;
  top: calc(1% + 0.4rem);
  z-index: 10;
  display: flex;
  border: 1px solid rgba(81, 249, 235, 1);
  border-radius: 5px;
}
.tabsitem {
  padding: 2px 4px;
  border-right: 2px;
  font-size: 0.1rem;
  cursor: pointer;
}
.tabsitem:nth-child(1) {
  border-right: 1px solid rgba(81, 249, 235, 1);
  
}

.isActive {
  background: #0754af;
}
</style>
